<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* font-family  字体 font-family:"微软雅黑" */
        /* 前面放英文，后面放后备字体 font-family:serif,"Times New RoMan"，"微软雅黑"*/
        /* 字体名字里有空格或者字体是中文要用“” */
        /* 微软雅黑英文名： Microsoft Yahei    宋体 SimSun*/
        /* 字体需为用户已安装的字体文件，若用户没安装，要开发者自定义字体*/
        /* 自定义文件：eot,woff2,woff,ttf,svg  定义方式@font-face{}*/
        /* 阿里巴巴普惠体 https://www.iconfont.cn/webfont */

        /* 上官网生成字体，注意要写自己需要的字体,有才有 */
        @font-face {
            font-family: 'webfont';
            font-display: swap;
            src: url('//at.alicdn.com/t/webfont_d0lhohzqs0d.eot');
            /* IE9*/
            src: url('//at.alicdn.com/t/webfont_d0lhohzqs0d.eot?#iefix') format('embedded-opentype'),
                /* IE6-IE8 */
                url('//at.alicdn.com/t/webfont_d0lhohzqs0d.woff2') format('woff2'),
                url('//at.alicdn.com/t/webfont_d0lhohzqs0d.woff') format('woff'),
                /* chrome、firefox */
                url('//at.alicdn.com/t/webfont_d0lhohzqs0d.ttf') format('truetype'),
                /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
                url('//at.alicdn.com/t/webfont_d0lhohzqs0d.svg#站酷高端黑') format('svg');
            /* iOS 4.1- */
        }

        .p1 {
            font-family: '微软雅黑';
        }

        .p2 {
            font-family: 'Microsoft Yahei';
        }

        .p3 {
            font-family: '宋体';
        }

        .p4 {
            font-family: SimSun;
        }

        .p5 {
            font-family: 'Times New Roman', serif, 'Microsoft Yahei';
        }

        .p6 {font-family: webfont;}

        
    </style>
</head>

<body>
    <p class="p1">imooc 慕课网 微软雅黑</p>
    <p class="p2">imooc 慕课网 Microsoft Yahei</p>
    <p class="p3">imooc 慕课网 宋体</p>
    <p class="p4">imooc 慕课网 SimSun</p>
    <p class="p5">imooc 慕课网 'Times New Roman',serif,'Microsoft Yahei'</p>
    <p class="p6">imooc 慕课网 webfont  有的字体才有（只有“慕课”有）</p>
    <p class="p7">imooc 慕课网</p>
</body>

</html>